<!--  -->
<template>
  <div>
    <div class="background">
    <div class="container"></div>
    <div class="title">好友列表</div>
    <div class="box">
      <div class="nav">
        <div :class="{'selected':tab === 1,'unselected':tab != 1}" @click="changeTab(1)">
          好友列表
        </div>
        <div :class="{'selected':tab === 2,'unselected':tab != 2}" @click="changeTab(2)">
          申请列表
        </div>
        <div :class="{'selected':tab === 3,'unselected':tab != 3}" @click="changeTab(3)">
          搜索
        </div>
      </div>
      <div class="context">     
        <!-- 好友列表 -->
        <div v-if="tab===1">  
          <scroll-view   :style="{'position': 'absolute','height': '81%','width': '90%','left':'5%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
            <div v-for="friend in friendList" :key="friend.userId">
            <div class="rank" @click="jmpToInformation(friend.userId)">
              <!-- 排名图标 -->
              <!-- <img class="icon" src="/static/images/user.png"/> -->
              <!-- 用户头像 -->
              <img class="img" :src="friend.avatarUrl"/>
              <div class="label">
                <p class="font">{{friend.nickName}}</p>
                <p class="font">积分：{{friend.score}}</p>
              </div>
            </div>
            </div>

          </scroll-view>
        </div>
        <div v-if="tab===2">
          <!-- 申请列表 -->
          <scroll-view   :style="{'position': 'absolute','height': '81%','width': '90%','left':'5%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
            <div v-for="(apply,index) in friendApply" :key="index">
            <div class="rank">
              
              <!-- 用户头像 -->
              <img class="img" style="margin-left: 6%" :src="apply.avatarUrl"/>
              <div class="label">
                <p class="font">{{apply.nickName}}</p>
                <p class="font">积分：{{apply.score}}</p>

              </div>
              
              <!-- 好友申请的同意和拒绝 -->
              <img @click="agree(index)" class="agree" src="/static/images/agree.jpg"/>
              <img @click="refuse(index)" class="refuse" src="/static/images/refuse.jpg"/>
            </div>
            </div>
          </scroll-view>
        </div>
        <div v-if="tab===3">
          <!-- 搜索 -->
          <scroll-view   :style="{'position': 'absolute','height': '77%','width': '90%','left':'5%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
            <div class="rank" v-if="isSearch">
              <!-- 用户头像 -->
              <img class="img" style="margin-left: 6%" :src="friendSearch.avatarUrl"/>
              <div class="label">
                <p class="font">{{friendSearch.nickName}}</p>
                <p class="font">积分：{{friendSearch.score}}</p>
              </div>
              <!-- 申请添加好友 -->
              <div @click="apply" class="apply">添加</div>
            </div>
          </scroll-view>
          <div id="searchbox">
            <input type="text" v-model="searchText" name="search" placeholder="请输入用户ID">
            <img @click="search" id="search" src="/static/images/search1.jpg"/>
          </div>
        </div>
      </div>
    </div>
    <button class="returnbutton" @click="returnToIndex">
      <img src="/static/images/returnbutton.jpg" style="position:absolute; width:30px; height:30px"/>
    </button>
  </div>

  </div>
</template>

<script>
import httpkit from '../../utils/http-kit'
import store from '../../utils/store'
export default {
  data () {
    return {
      friendList: [],
      tab: 1,
      friendApply: [],
      isSearch: false,
      friendSearch: {},
      searchText: ''
    }
  },
  onLoad () { // 清空数据重新加载
    Object.assign(this.$data, this.$options.data())
  },
  mounted () {
    var _this = this
    httpkit.get('/user/friendlist', {
      wechatId: store.state.openid
    }).then(res => {
      console.log(res.data)
      _this.friendList = res.data
    })
    httpkit.get('/friend/checkApply', {
      userId: store.state.userid
    }).then(res => {
      _this.friendApply = res.data
    })
  },
  components: {},

  methods: {
    agree (index) {
      var _this = this
      httpkit.get('/friend/passAdd', {
        userId: store.state.userid,
        friendId: _this.friendApply[index].id
      }).then(res => {
        _this.friendApply.splice(index, 1)
      })
    },
    refuse (index) {
      var _this = this
      httpkit.get('/friend/refuseApply', {
        userId: store.state.userid,
        friendId: _this.friendApply[index].id
      }).then(res => {
        _this.friendApply.splice(index, 1)
      })
    },
    search () {
      var _this = this
      httpkit.get('/user/hisInformation', {
        userId: _this.searchText
      }).then(res => {
        if (res.data) {
          _this.friendSearch = res.data
          _this.isSearch = true
        } else {
          _this.isSearch = false
        }
      })
    },
    apply () {
      var _this = this
      httpkit.get('/friend/addApply', {
        userId: store.state.userid,
        friendId: _this.friendSearch.id
      }).then(
        wx.showToast({
          title: '申请成功',
          icon: 'success',
          duration: 2000
        })
      )
    },
    changeTab (index) {
      this.tab = index
    },
    returnToIndex () {
      wx.navigateBack({})
    },
    jmpToInformation (id) {
      console.log(id)
      store.commit('changeRivalid', id)
      wx.navigateTo({
        url: '../user/main'
      })
    }
  }
}
</script>
<style>
.background{
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564544763&di=cf7d14f6c4bb7af1bff963204fa2e698&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F03%2F20150403H4754_frQCN.thumb.700_0.jpeg);
  background-size: 1150px;
  background-position: right;
}
.title{
  position: absolute;
  top: 10%;
  left: 31%;
  color:white;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 8px;
  text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
.label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
  width: 50%;
  overflow: hidden;
}
.font {
  font-size: 12px;
}
.icon {
  margin-top: 6%;
  margin-left: 6%;
  width: 12.5%;
  height: 50%;
}
.img {
  margin-top: 6%;
  margin-left: 4%;
  width: 12.5%;
  height: 50%;
}
.rank {
  display: flex;
  border-radius: 15px;
  margin-top: 12px;
  height: 67px;
  width: 100%;
  color: white;
  background-color:	#000000;
  opacity: 0.7;
}
.agree{
  margin-top: 7.5%;
  margin-left: 0.5%;
  width: 9.75%;
  height: 39%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.refuse{
  margin-top: 7.5%;
  margin-left: 2%;
  width: 9%;
  height: 36%;
  border-radius: 50%;
  border-style: solid;
  border-width: 2.3px;
  border-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.apply{
  margin-top: 7.5%;
  margin-left: 1%;
  width: 20%;
  height: 36%;
  color: white;
  border-radius: 12px;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: rgb(245, 211, 19);
  font-size: 13px;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#searchbox{
  position:absolute;
  height: 20%;
  width: 90%;
  top: 90%;
  left: 5%;
  font-size: 13px;
}
input{
  width: 77%;
  height: 20%;
  border: 3px solid black;
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  float: left;
  padding:0 0 0 20px;
}
#search{
  width: 13.8%;
  height: 29%;
  float: right;
}
.box {
  position: absolute;
  width: 80%;
  height: 81.5%;
  top: 14%;
  left: 10%;
}
.nav {
  display: flex;
  flex-direction: row;
  margin-top: 9%;
  margin-left: 2%;
  margin-right: 2%;
  width: 100%;
  height: 8%;
  font-size: 16px;
  font-weight: 600;
  color: #f8f8fa;
  letter-spacing: 3px;
}
.unselected {
  display: flex;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 32%;
  border-radius: 15px 15px 0px 0px;
  background-color:	rgba(0, 0, 0, 0.541);
}
.selected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  height: 100%;
  width: 32%;
  border-radius: 15px 15px 0px 0px;
  background-color: #3562b4;
}
.context {
  margin-left: 2%;
  margin-right: 2%;
  height: 85.5%;
  border-radius: 0px 0px 12px 12px;
  background-color: #3562b4;
}
.container {
  position:absolute;
  top: 14%;
  left: 10%;
  width: 80%;
  height: 81%;
  border-radius: 15px;
  background-color:	#000000;
  opacity: 0.5;
  color: aliceblue;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.returnbutton{
  position: absolute;
  top: 4.5%;
  left: 4%;
  width: 20px;
  height: 38px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
</style>